import { withModifiers, defineComponent, ref, h, reactive } from 'vue'
import TestH from '../../H.vue'
import './style/parent.less'
import Child from './Child'
const App = defineComponent({
  /**
   * setup方法
   * @param props 接收父组件传过来的属性
   * @param slots 组件对外暴露插槽
   * @param attrs 接收父组件传递的属性
   * @param expose 组件对外暴露属性方法
   */
  setup(props, { slots, attrs, expose }) {
    const testId = ref<string>('father')
    const flag = ref<boolean>(false)
    const list = reactive<Array<{ name: string; sex: string; ave: string }>>([
      {
        name: 'ldb',
        sex: '男',
        ave: '20',
      },
      {
        name: 'ldb',
        sex: '男',
        ave: '20',
      },
      {
        name: 'ldb',
        sex: '男',
        ave: '20',
      },
      {
        name: 'ldb',
        sex: '男',
        ave: '20',
      },
      {
        name: 'ldb',
        sex: '男',
        ave: '20',
      },
      {
        name: 'ldb',
        sex: '男',
        ave: '20',
      },
    ])
    return () => (
      <>
        <div class="parent">
          {/*事件*/}
          <div
            id={testId.value}
            class={testId.value}
            onClick={withModifiers(() => {
              flag.value = !flag.value
            }, ['self'])}
          >
            Hello World
          </div>
          <div>{flag.value ? <div>yes</div> : <div>no</div>}</div>
          <ul>
            {list.map(({ name, sex, ave }) => {
              return (
                <li key={name}>
                  {name} {sex} {ave}
                </li>
              )
            })}{' '}
          </ul>
          <TestH msg={testId.value} />
        </div>
        <div>{testId.value}</div>
        {/*双向绑定*/}
        <Child v-model:msg={testId.value}>
          {/*插槽*/}
          {{
            default: () => '默认头部',
            body: () => <div>身体</div>,
            footer: () => <div>脚</div>,
          }}
        </Child>
      </>
    )
  },
})
export default App
